<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.current{
				color:red;
			}
		</style>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		
	<div id="app">
		
		<!-- <login></login> -->
		<!-- tag：指定渲染出来的标签 -->
	<!-- 	<router-link to="/login" tag="p">登录组件</router-link> -->
	    <router-link to="/login" >登录组件</router-link>
		<router-link to="/user">用户列表</router-link>
		<router-view></router-view>
		
		
	</div>	
	
	<template id="t1">
		<div>
			<h3>我是登录组件</h3>			
		</div>	
	</template>
	
	<template id="t2">
		<div>
			<h3>用户列表页组件</h3>
		</div>
	</template>
	
	
	
	
	<script>
		
	var routes=[
		{
			path:'/',
			redirect:'/login' //重定向
		},
		{
			path:'/login',
			name:'login',
			component:{
				template:"#t1"
			},
			
		},
		{
			path:'/user',
			name:'user',
			component:{
				template:"#t2"
			}
		}
	]
		
	var router=new VueRouter({
		routes,
		//定制切换当前路由的类名
		linkActiveClass:'current'
	})	
		

		
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			components:{
				login:{
					template:"#t1",
					data(){
						return {
							
						}
					}
				}
			},
			router
		})
		
	</script>	
		
		
		<!-- 一、命名路由
			 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
			 你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称 
			 -->
	</body>
</html>
